<template>
    <div class="teacher-wrap">
        <Header></Header>
        <div class="container">
            <div class="teacher-top">
                <div class="userinfo">
                    <div class="touxiang">
                        <img v-if="userInfo.avatar" :src="`${userInfo.avatar}`" alt="">
                        <img v-else src="../../assets/images/yhtx.png" alt="">
                    </div>
                    <div class="jianjie">
                        <div class="jjtop">
                            <h3>{{ userInfo.real_name || '匿名用户' }}</h3>
                            <p>老 师</p>
                        </div>
                        <div class="jjbottom">
                            <span>ID：{{ userInfo.id }}</span>
                            <span>账号：{{ userInfo.username }}</span>
                            <span>学校名称：{{ userInfo.school_name }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="teacher-box">
                <SidebarMenu :tabList="tabList" @tabClick="handleTabsClick"></SidebarMenu>
                <CourseList v-if="activeName === 'course'" @toDetail="toDetail"></CourseList>
                <CourseTeach v-if="activeName === 'teach'" @correctHomework="correctHomework"></CourseTeach>
                <CorrectHomework v-if="activeName === 'homework'" @click="correctHomework"></CorrectHomework>
                <StudyReport v-if="activeName === 'report'" :port="'student'"></StudyReport>
                <DownloadTools v-if="activeName === 'tools'"></DownloadTools>
                <ClassManagement v-if="activeName === 'class'"></ClassManagement>
                <StudentManage v-if="activeName === 'student'"></StudentManage>
                <UserInfo v-if="activeName === 'user'" :userInfo="userInfo" @getUserInfo="getUserInfo"></UserInfo>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import SidebarMenu from "../../components/SidebarMenu.vue";
import CourseList from './components/courseList.vue';
import CourseTeach from './components/courseTeach';
import CorrectHomework from './components/correctHomework';
import StudyReport from './components/studyReport';
import DownloadTools from '../courseCenter/components/downloadTools';
import ClassManagement from './components/classManagement';
import StudentManage from './components/studentManage';
import UserInfo from './components/userInfo';
export default {
    name: 'Teacher',
    components: {
        Header,
        Footer,
        SidebarMenu,
        CourseList,
        CourseTeach,
        CorrectHomework,
        StudyReport,
        DownloadTools,
        ClassManagement,
        StudentManage,
        UserInfo
    },
    data() {
        return {
            tabList: [
                {
                    name: "平台课程管理",
                    children: [
                        {
                            title: '课程中心',
                            type: 'course'
                        },
                        {
                            title: '课程教学',
                            type: 'teach'
                        },
                        {
                            title: '批改作业',
                            type: 'homework'
                        },
                        {
                            title: '学情报告',
                            type: 'report'
                        },
                        {
                            title: '创作工具',
                            type: 'tools'
                        }
                    ]
                },
                {
                    name: "学校信息管理",
                    children: [
                        {
                            title: '班级管理',
                            type: 'class'
                        },
                        {
                            title: '学生管理',
                            type: 'student'
                        }
                    ]
                },
                {
                    name: "个人管理",
                    children: [
                        {
                            title: '基本信息',
                            type: 'user'
                        }
                    ]
                }
            ],
            activeName: 'course',
            userInfo: {}
        }
    },
    computed: {
        imageUrl() {
            return process.env.VUE_APP_IMAGE_URL; // 自动匹配当前环境
        }
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        async getUserInfo() {
            const res = await this.$request.get('api/user/user_info');
            console.log(res, 'res===');
            if (res.code == 1) {
                this.userInfo = res.data.userinfo || {};
            }
        },
        handleTabsClick(item) {
            this.activeName = item.type;
            console.log(item, 'eeeeee');
        },
        correctHomework() {
            this.activeName = 'homework';
        },
        toDetail(id) {
            this.$router.push('/kcDetail?id=' + id);
        }
    }
}
</script>
<style lang="less" scoped>
.teacher-wrap{
    .container{
        background: #FFFFFF;
        margin-top: 80px;
        .teacher-top{
            width: 100%;
            height: 240px;
            background: url("../../assets/images/coursebg.png") no-repeat center;
            background-size: 100% 100%;
            .userinfo{
                display: flex;
                align-items: center;
                max-width: 1200px;
                margin: 0 auto;
                padding-top: 80px;
                .touxiang{
                    width: 80px;
                    height: 80px;
                    overflow: hidden;
                    margin-right: 20px;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 8px;
                    }
                }
                .jianjie{
                    .jjtop{
                        display: flex;
                        align-items: center;
                        h3{
                            font-weight: 600;
                            font-size: 42px;
                            color: #317AF7;
                            margin-right: 20px;
                        }
                        p{
                            width: 52px;
                            height: 18px;
                            line-height: 18px;
                            background: #1664FF;
                            border-radius: 10px 10px 10px 0px;
                            font-weight: 500;
                            font-size: 10px;
                            color: #FFFFFF;
                        }
                    }
                    .jjbottom{
                        display: flex;
                        align-items: center;
                        span{
                            font-weight: 500;
                            font-size: 16px;
                            color: #333333;
                            margin-right: 40px;
                        }
                    }
                }
            }
        }
        .teacher-box{
            width: calc(100% - 120px);
            margin: 30px auto;
            display: flex;
            align-items: flex-start;
        }
    }
}
</style>